<template>
    <view class="content">
        <hx-navbar :config="config" />
        <view class="order-info" v-if="productInfo && productInfo.length > 0">
            <view class="order-info-boxs" v-for="(item,index) in productInfo" :key="index">
                <view class="inventory">
                    <image src="/static/product.png"></image>
                    <text>产品信息</text>
                </view>
                <view class="order-content">
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>产品名称：</view>
                            <view>{{item.product_name?item.product_name:""}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>产品型号：</view>
                            <view>{{item.product_model?item.product_model:""}}</view>
                        </view>

                    </view>
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>产品数量：</view>
                            <view>{{item.product_number?item.product_number:""}}</view>
                        </view>
                        <view class="order-box-cont">
                            <view>出厂编号：</view>
                            <view>{{item.factory_number?item.factory_number:""}}</view>
                        </view>
                    </view>
                </view>
                <view class="order-line"></view>
                <view class="inventory">
                    <image src="/static/shengchan.png"></image>
                    <text>生产信息</text>
                </view>
                <view class="order-content">
                    <view class="order-box">
                        <view class="order-box-cont-url">
                            <view class="contract-label">保压记录：</view>
                            <view class="contract-url" v-if="item && item.holding_pressure_record">
                                <view v-for="(item1,index1) in item.holding_pressure_record" :key="index1">
                                    <view class="contract-url-cont" @click="previewFile(item1.path)">
                                        <text>
                                            {{ item1.tag}}
                                        </text>
                                        <text class="pdf-link">
                                            预览
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="order-box-cont-url">
                            <view class="contract-label">
                                <text>精准校验</text>
                                <text>记录：</text>
                            </view>
                            <view class="contract-url" v-if="item && item.accuracy_verification_record">
                                <view v-for="(item1,index1) in item.accuracy_verification_record" :key="index1">
                                    <view class="contract-url-cont" @click="previewFile(item1.path)">
                                        <text>
                                            {{ item1.tag}}
                                        </text>
                                        <text class="pdf-link">
                                            预览
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="order-box">
                        <view class="order-box-cont-url">
                            <view class="contract-label">
                                <text>生产过程</text>
                                <text>记录：</text>
                            </view>
                            <view class="contract-url" v-if="item && item.production_process_record">
                                <view v-for="(item1,index1) in item.production_process_record" :key="index1">
                                    <view class="contract-url-cont" @click="previewFile(item1.path)">
                                        <text>
                                            {{ item1.tag}}
                                        </text>
                                        <text class="pdf-link">
                                            预览
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="order-box-cont">
                            <view>报检状态：</view>
                            <view>{{item.is_quality_inspection==1?"已报检":"未报检"}}</view>
                        </view>
                    </view>
                </view>
                <view class="order-line"></view>
                <view class="inventory">
                    <image src="/static/zhijian.png"></image>
                    <text>质检资料</text>
                </view>
                <view class="order-content">
                    <view class="order-box">
                        <view class="order-box-cont-url">
                            <view class="contract-label">质检记录：</view>
                            <view class="contract-url" v-if="item && item.upload_qualified_record">
                                <view v-for="(item1,index1) in item.upload_qualified_record" :key="index1">
                                    <view class="contract-url-cont" @click="previewFile(item1.path)">
                                        <text>
                                            {{ item1.tag}}
                                        </text>
                                        <text class="pdf-link">
                                            预览
                                        </text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>质检结果：</view>
                            <view>{{item.is_qualified==1?"合格":"不合格"}}</view>
                        </view>
                    </view>
                </view>
                <view class="order-line"></view>
                <view class="inventory">
                    <image src="/static/fahuo.png"></image>
                    <text>发货资料</text>
                </view>
                <view class="order-content">
                    <view class="order-box">
                        <view class="order-box-cont-url">
                            <view class="contract-label">物料图片：</view>
                            <view class="contract-url contract-url-image" v-if="item && item.upload_materials_image">
                                <view v-for="(item1,index1) in item.upload_materials_image" :key="index1">
                                    <view class="order-image" @click="previewFile(item1)">
                                        <image :src="item1"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="order-box-cont-url">
                            <view class="contract-label">装箱图片：</view>
                            <view class="contract-url contract-url-image" v-if="item && item.upload_packing_image">
                                <view v-for="(item1,index1) in item.upload_packing_image" :key="index1">
                                    <view class="order-image" @click="previewFile(item1)">
                                        <image :src="item1"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="order-box">
                        <view class="order-box-cont">
                            <view>物流单号：</view>
                            <view>{{item.tracking_number?item.tracking_number:""}}</view>
                        </view>
                        <view class="order-box-cont-url">
                            <view class="contract-label">
                                <text>物流单号</text>
                                <text>图片：</text>
                            </view>
                            <view class="contract-url contract-url-image" v-if="item && item.tracking_image">
                                <view v-for="(item1,index1) in item.tracking_image" :key="index1">
                                    <view class="order-image" @click="previewFile(item1)">
                                        <image :src="item1"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-line" v-if="type != 'detail'"></view>
                <view class="inventory" v-if="type != 'detail'">
                    <image src="/static/shezhi.png"></image>
                    <text>设置</text>
                </view>
                <view class="order-content" style="margin-bottom: 20rpx;" v-if="type != 'detail'">
                    <view class="order-setting-option">
                        <view class="order-btn order-btn-shipment" v-if="type == 'shipment'"
                            @click="shipmentView(item.bid)">
                            去发货
                        </view> 
                        <view class="order-btn order-btn-production-progress" v-if="type == 'productionProgress'"
                            @click="productionProgressView(item.bid)">
                            生产资料上传
                        </view> 
                        <view class="order-btn order-btn-production-progress" v-if="type == 'productionQualified'"
                            @click="productionQualifiedView(item.bid)">
                            质检资料上传
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="nolist" v-else>
            <image src="/static/nolist.png"></image>
            <text>暂无数据</text>
        </view>
    </view>
</template>

<script>
    import {
        productInfos
    } from '@/common/api/order.js'
    export default {
        data() {
            return {
                config: {
                    back: true,
                    title: '生产信息',
                    fontSize: '16px',
                    color: '#ffffff',
                    //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                    backgroundColor: [1, ['#6970ff', '#6970ff']],
                    // 状态栏 ，数组则为滑动变色
                    statusBarBackground: ['', '#ffffff'],
                },
                productInfo: [],
                type: "",
                id: ""
            }
        },
        onShow() {
            this.orderProductView(this.id)
        },
        onLoad(options) {
            this.type = options.type
            this.id = options.id
            this.orderProductView(options.id)
        },
        methods: {
            shipmentView(id) {
                //id是product_info的id
                uni.navigateTo({
                    url: "/pages/index/shipment?id=" + id,
                })
            },
            productionProgressView(id) {
                //id是product_info的id
                uni.navigateTo({
                    url: "/pages/index/productionProgress?id=" + id,
                })
            },  
            productionQualifiedView(id) {
                //id是product_info的id
                uni.navigateTo({
                    url: "/pages/index/productionQualified?id=" + id,
                })
            },

            orderProductView(id) {
                productInfos({
                    id: id
                }).then((res) => {
                    console.log(res, "asda")
                    this.productInfo = res
                }).catch((err) => {

                });
            },

            // 从URL中提取文件类型（根据后缀名）
            getFileTypeFromUrl(url) {
                if (!url) return null;
                // 匹配URL中最后一个"."后的字符串（忽略参数）
                const match = url.match(/\.([a-zA-Z0-9]+)(\?.*)?$/);
                if (match && match[1]) {
                    const ext = match[1].toLowerCase(); // 转为小写（兼容大小写后缀，如.PDF/.XLSX）
                    // 只保留我们需要的类型（pdf/xlsx/xls）
                    if (['pdf', 'xlsx', 'xls', 'jpg', 'png', 'jpeg'].includes(ext)) {
                        return ext;
                    }
                }
                return null; // 无法识别的类型
            },

            // 通用文件预览（基于URL后缀判断类型）
            previewFile(fileUrl) {
                if (!fileUrl) {
                    uni.showToast({
                        title: '暂无文件',
                        icon: 'none'
                    });
                    return;
                }

                // 1. 通过 URL 获取文件类型
                const fileType = this.getFileTypeFromUrl(fileUrl);
                if (!fileType) {
                    uni.showToast({
                        title: '不支持的文件类型',
                        icon: 'none'
                    });
                    return;
                }

                // 区分文件类型处理
                if (['png', 'jpg', 'jpeg'].includes(fileType)) {
                    // 图片类型，使用 uni.previewImage 预览
                    uni.previewImage({
                        urls: [fileUrl], // 图片预览接口要求传入数组，这里单个图片也用数组形式
                        success: (res) => {
                            console.log(`${fileType} 预览成功`, res);
                        },
                        fail: (err) => {
                            console.error(`${fileType} 预览失败`, err);
                            uni.showToast({
                                title: `打开图片失败`,
                                icon: 'none'
                            });
                        }
                    });
                } else {
                    // 文档类型，走原来的下载 + 打开流程
                    // 2. 下载文件（与之前逻辑一致）
                    uni.downloadFile({
                        url: fileUrl,
                        success: (downloadRes) => {
                            if (downloadRes.statusCode === 200) {
                                // 3. 打开文件（使用解析出的类型）
                                uni.openDocument({
                                    filePath: downloadRes.tempFilePath,
                                    fileType: fileType,
                                    showMenu: true,
                                    success: () => {
                                        console.log(`${fileType} 打开成功`);
                                    },
                                    fail: (err) => {
                                        console.error(`打开${fileType}失败`, err);
                                        uni.showToast({
                                            title: `打开文件失败`,
                                            icon: 'none'
                                        });
                                    }
                                });
                            } else {
                                uni.showToast({
                                    title: '文件下载失败',
                                    icon: 'none'
                                });
                            }
                        },
                        fail: () => {
                            uni.showToast({
                                title: '网络请求失败',
                                icon: 'none'
                            });
                        }
                    });
                }
            }
        }
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .order-info {
        width: 100%;
        margin-top: 20rpx;
    }

    .order-info-boxs {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 10rpx;
        border-radius: 10rpx;
        margin: 0 20rpx 15rpx 20rpx;
        border: 1rpx solid #c1c1c1;
    }

    .order-number {
        font-size: 22rpx;
    }

    .inventory {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .inventory image {
        width: 24rpx;
        height: 24rpx;
    }

    .inventory text {
        font-size: 22rpx;
        font-weight: bold;
        margin-left: 10rpx;
    }

    .order-line {
        border-top: 1rpx solid #f5f5f5;
        margin: 15rpx 0;
    }

    .order-content {
        display: flex;
        justify-content: space-between;
        font-size: 20rpx;
    }

    .order-box {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .order-setting-option {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .order-box-cont {
        display: flex;
        margin-bottom: 15rpx;
    }

    .order-box-cont view:first-of-type {
        width: 30%;
        text-align: right;
    }

    .order-box-cont view:last-of-type {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        word-break: break-all;
        word-wrap: break-word;
    }

    .order-box-cont-url {
        display: flex;
        margin-bottom: 15rpx;
    }

    .contract-label {
        width: 30%;
        display: flex;
        flex-direction: column;
    }

    .contract-url {
        width: 60%;
    }

    .contract-url view {
        display: flex;
        flex-direction: column;
    }

    .contract-url-cont text:first-of-type {
        width: 100%;
    }

    .contract-url-image {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .order-option {
        display: flex;
        margin-top: 20rpx;
        justify-content: flex-end;
    }

    .order-btn {
        width: 9%;
        padding: 6rpx 30rpx;
        font-size: 20rpx;
        border: 1rpx solid #d5d5d5;
        border-radius: 30rpx;
        margin-right: 40rpx;
    }

    .order-btn-edit {
        color: #00aaff;
        border-color: #00aaff;
    }

    .order-btn-check {
        color: #aaaa00;
        border-color: #aaaa00;
    }

    .order-btn-shipment {
        color: #ffaa00;
        border-color: #ffaa00;
    } 
    .order-btn-production-progress {
        width: 18%;
        color: #ffaa00;
        border-color: #ffaa00;
    }

    .nolist {
        width: auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nolist image {
        width: 200rpx;
        height: 200rpx;
    }

    .pdf-link {
        color: #6970ff;
        text-decoration: underline;
    }

    .order-image {
        margin: 0 10rpx 10rpx 0;
    }

    .order-image image {
        width: 80rpx;
        height: 80rpx;
    }
</style>